<template>
    <div class="quote_div" :class="'quote_'+type">
        <slot name="msgcon"></slot>
        <slot></slot>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    name:'g-quote',
    props:{
        type:{
            type:String,
            default:'success'
        }
    },
    setup(props){
        let type = ref(props.type);
        return {
            type
        }
    }
}
</script>
<style scoped>
    .quote_div{
        padding: 13px;
        /* border-left: 3px solid var(--main-color); */
        background-color: #fcfcfc;
        border-top: 1px solid  #DCDFE6;
        border-right: 1px solid  #DCDFE6;
        border-bottom: 1px solid  #DCDFE6;
        /* background-color: var(--sub-color); */
        /* color: white; */
        margin: 5px 0;
        font-size: 16px;
        border-radius: 5px;
    }
    .quote_success{
        border-left: 3px solid #67C23A;
    }
    .quote_warning{
        border-left: 3px solid #E6A23C;
    }
    .quote_error{
        border-left: 3px solid #F56C6C;
    }
    .quote_info{
        border-left: 3px solid #909399;
    }
</style>